<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box{
            width: 500px;
            margin:200px auto;
        }
        ul{
            width: 392px;
            padding:5px;
            list-style:none;
            font:16px/20px microsoft yahei;
            border:1px solid #ced6e7;
        }
        li:hover{
            background-color:#94b5d6;
        }
        input{
            width: 400px;
            height: 30px;
        }
        button{
            width: 70px;
            height: 30px;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text">
    <button>搜索</button>
    <!--<ul>-->
        <!--<li>aaaa</li>-->
        <!--<li>bbb</li>-->
        <!--<li>ccc</li>-->
    <!--</ul>-->
</div>
<script>
    //输入内容（输入事件，键盘弹起事件），模拟服务器获取内容，创建ul，并在其中显示
    var arr=["a","ab","abc","abcd","aa","aaa"];
    var box=document.getElementsByTagName("div")[0];
    var inp=box.children[0];
    inp.onkeyup=function(){
        var array=[];
        for(var i=0;i<arr.length;i++){
            //判断当前项，是否以input内容为开头
            var val=this.value;
            if(arr[i].indexOf(val)===0){
                array.push("<li>"+arr[i]+"</li>")
            }
        }
        var str=array.join("");
        //bug1:每次创建ul之前，要先删除旧的ul
        if(box.children[2]){
            //object类型只要你不是null，对应的boolean类型值都是true
            box.removeChild(box.children[2]);
        }
        //bug2:当input内容为空，那么就不能创建ul
        //bug3:如果arr数组中没有以input为开头的元素（array长度为零），那么切断函数
        if(this.value.length===0||array.length===0){
            return;
        }
        var ul=document.createElement("ul");
        ul.innerHTML=str;
        box.appendChild(ul);
    }
</script>
</body>
</html>